<template>
  <div class="page-wrap page-detail ignore">
    <van-card thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
      <template #title>
        <van-space>
          {{ data[0]?.projectName }}
          <van-tag type="warning">{{ data[0]?.investStage }}</van-tag>
        </van-space>
      </template>
      <template #price>
        {{ data[0]?.companyName || '-' }}
      </template>
      <template #num> 更新日期：{{ data[0]?.downPaymentDate }} </template>
    </van-card>
    <van-row class="t-info" justify="space-between" align="center">
      <van-col span="6">
        <p>项目联络人</p>
        <van-space size="5px" class="vinfo uinfo">
          <img src="@/assets/images/head.jpg" />
          <span>{{ data[0]?.contactPerson }}</span>
        </van-space>
      </van-col>
      <van-col span="6">
        <p>主管合伙人</p>
        <van-space size="5px" class="vinfo uinfo">
          <img src="@/assets/images/head.jpg" />
          <span>{{ data[0]?.managingPartner }}</span>
        </van-space>
      </van-col>
      <van-col span="6">
        <p>主行业</p>
        <van-space class="vinfo">
          <span class="ellipsis">{{ data[0]?.mainIndustry || '-' }}</span>
        </van-space>
      </van-col>
      <van-col span="6">
        <p>投资阶段</p>
        <van-space class="vinfo">
          <span class="ellipsis">{{ data[0]?.investStage || '-' }}</span>
        </van-space>
      </van-col>
    </van-row>
    <van-divider />
    <van-tabs v-model:active="activeTab" @change="tabChange">
      <div class="group-main">
        <van-button size="small" plain type="primary">全部</van-button>
        <van-button size="small">主行业</van-button>
        <van-button size="small">主行业</van-button>
      </div>
      <van-tab title="基本信息">
        <div class="litem">
          <h5>投资信息</h5>
          <van-row justify="space-between">
            <van-col :span="10">
              <span class="k">协议金额(万)</span>
              <span class="v">{{ data[0]?.agreementAmt }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">打款金额(万)</span>
              <span class="v">{{ data[0]?.paymentAmt }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">首次付款日期</span>
              <span class="v">{{ data[0]?.downPaymentDate }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">项目进入轮次</span>
              <span class="v">{{ data[0]?.projectRotation }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">进入轮次估值(亿)</span>
              <span class="v">{{ data[0]?.roundValuation }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">公司当前轮次</span>
              <span class="v">{{ data[0]?.companyRotation }}</span>
            </van-col>
          </van-row>
        </div>

        <van-divider></van-divider>
        <div class="litem">
          <h5>当前回报</h5>
          <van-row justify="space-between">
            <van-col :span="10">
              <span class="k">已实现(万)</span>
              <span class="v">{{ data[0]?.implementedAmt }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">未实现(万)</span>
              <span class="v">{{ data[0]?.unrealizedAmt }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">总回报金额(万)</span>
              <span class="v">{{ data[0]?.totalReturnAmount }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">总回报倍数</span>
              <span class="v">{{ data[0]?.totalReturnMun }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">当前IRR(%)</span>
              <span class="v">{{ data[0]?.irr }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">持有股比(%)</span>
              <span class="v">{{ data[0]?.shareholdingRatio }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">最新估值(亿)</span>
              <span class="v">{{ data[0]?.latestValuation }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">基金DPI贡献度</span>
              <span class="v">{{ data[0]?.dpiContribution }}</span>
            </van-col>
          </van-row>
        </div>
        <van-divider></van-divider>
        <div class="litem">
          <h5>最新退出预测</h5>
          <van-row justify="space-between">
            <van-col :span="10">
              <span class="k">退出总目标(万)</span>
              <span class="v">{{ data[0]?.exitOverallGoal }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">其中今年目标(万)</span>
              <span class="v">{{ data[0]?.thisYearGoals }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">预计退出估值(万)</span>
              <span class="v">{{ data[0]?.expectedExitValuation }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">预计退出时间</span>
              <span class="v">{{ data[0]?.expectedExitTime }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">预计退出方式</span>
              <span class="v">{{ data[0]?.expectedExitMethod }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">预计回报倍数</span>
              <span class="v">{{ data[0]?.expectedReturnMultiple }}</span>
            </van-col>
          </van-row>
        </div>
        <van-divider></van-divider>
        <div class="litem">
          <h5>IC时退出预测</h5>
          <van-row justify="space-between">
            <van-col :span="10">
              <span class="k">退出总目标(万)</span>
              <span class="v">{{ data[0]?.icExitOverallGoal }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">其中今年目标(万)</span>
              <span class="v">{{ data[0]?.icThisYearGoals }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">预计退出估值(万)</span>
              <span class="v">{{ data[0]?.icExpectedExitValuation }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">预计退出时间</span>
              <span class="v">{{ data[0]?.icExpectedExitTime }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">预计退出方式</span>
              <span class="v">{{ data[0]?.icExpectedExitMethod }}</span>
            </van-col>
            <van-col :span="10">
              <span class="k">预计回报倍数</span>
              <span class="v">{{ data[0]?.icExpectedReturnMultiple }}</span>
            </van-col>
          </van-row>
        </div>
      </van-tab>
      <van-tab title="项目轮次"> </van-tab>
      <van-tab title="投后事项">3 </van-tab>
      <van-tab title="文件">4 </van-tab>
      <van-tab title="关键条款">5 </van-tab>
      <van-tab title="投后义务"> 6</van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { apiService } from '@/api';
import { useRoute } from 'vue-router';
const activeTab = ref(0);
const route = useRoute();
const id = route.params?.id;
const data = ref([]);
//加载tab数据
const loadData = {
  //基本信息
  get0() {
    apiService.getDetail({ id }).then((res) => {
      data.value[0] = res.result;
    });
  }
};
const tabChange = (index) => {
  const callback = loadData['get' + index];
  callback && callback();
};
onMounted(() => {
  tabChange(0);
});
</script>
<style scoped lang="less">
@import './detail.less';
</style>
